<!--
/**
 * author: vformAdmin
 * email: vdpadmin@163.com
 * website: https://www.vform666.com
 * date: 2021.08.18
 * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
 */
-->

<template>
  <div class="field-wrapper"
       :class="{ 'design-time-bottom-margin': !!this.designer ,'render-time-bottom-margin':!this.designer}">
    <el-form-item v-if="!!field.formItemFlag && (!field.options.hidden || (designState === true))" :label="label"
                  :label-width="labelWidth + 'px'" :title="field.options.labelTooltip" :size="field.options.size"
                  :rules="rules"
                  :prop="getPropName()"
                  :class="[
                    selected ? 'selected' : '',
                     labelAlign,
                     customClass,
                     field.options.required ? 'required' : '',
                     !!field.options.labelWrap ? 'label-wrap' : '',
                  ]"
                  style="flex:1;"
                  @click.stop="selectField(field)">

      <template #label>
        <span v-if="!!field.options.labelIconClass" class="custom-label">
          <template v-if="field.options.labelIconPosition === 'front'">
            <template v-if="!!field.options.labelTooltip">
              <el-tooltip :content="field.options.labelTooltip" effect="light">
                <el-icon>
                  <component :is="field.options.labelIconClass" />
                </el-icon></el-tooltip>{{ label }}</template>
            <template v-else>
              <el-icon>
                <component :is="field.options.labelIconClass" />
              </el-icon>{{ label }}</template>
          </template>
          <template v-else-if="field.options.labelIconPosition === 'rear'">
            <template v-if="!!field.options.labelTooltip">
              {{ label }}<el-tooltip :content="field.options.labelTooltip" effect="light">
                <el-icon>
                  <component :is="field.options.labelIconClass" />
                </el-icon></el-tooltip></template>
            <template v-else>
              {{ label }}<el-icon>
                <component :is="field.options.labelIconClass" />
              </el-icon></template>
          </template>
        </span>
      </template>
      <!--      <slot :class="[designState?'disabled':'']"></slot>-->
      <slot :inTableFlag="inTableFlag" :columnProp="columnProp"></slot>
    </el-form-item>

    <template v-if="!!this.designer">
      <div class="field-action" v-if="designer.selectedId === field.id">
        <i :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)">
          <svg-icon icon-class="el-back" />
        </i>
        <i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
           @click.stop="moveUpWidget(field)">
          <svg-icon icon-class="el-move-up" />
        </i>
        <i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
           @click.stop="moveDownWidget(field)">
          <svg-icon icon-class="el-move-down" />
        </i>
        <i :title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneField(field)">
          <svg-icon icon-class="el-clone" />
        </i>
        <i :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget">
          <svg-icon icon-class="el-delete" />
        </i>
      </div>

      <div class="drag-handler" v-if="designer.selectedId === field.id" @mousedown.stop @touchstart.stop>
        <i :title="i18nt('designer.hint.dragHandler')">
          <svg-icon icon-class="el-drag-move" />
        </i>
        <i>{{ i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`) }}</i>
        <i v-if="field.options.hidden === true">
          <svg-icon icon-class="el-hide" />
        </i>
      </div>
    </template>
  </div>
</template>

<script>
import SvgIcon from '@/components/svg-icon'
import i18n from '@/utils/i18n'
import eventBus from '@/utils/event-bus.js'
import { EVENT_BUS_KEY } from '@/utils/constants'

export default {
  name: 'form-item-wrapper',
  mixins: [i18n],
  components: {
    SvgIcon,
  },
  props: {
    field: Object,
    designer: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    inTableFlag: false,
    columnProp: Object,
    designState: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
      type: Number,
      default: -1,
    },
    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1,
    },
    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: '',
    },

    rules: Array,
  },
  inject: ['getFormConfig', 'getSubFormFieldFlag', 'getSubFormName', 'getObjectFieldFlag', 'getObjectName'],
  computed: {
    pointerEvent() {
      return !!this.designState ? 'none' : ''
    },
    formConfig() {
      return this.getFormConfig()
    },

    selected() {
      return !!this.designer && this.field.id === this.designer.selectedId
    },

    label() {
      if (!!this.field.options.labelHidden) {
        return ''
      }

      return this.field.options.label
    },

    labelWidth() {
      if (!!this.field.options.labelHidden) {
        return 0
      }

      if (!!this.field.options.labelWidth) {
        return this.field.options.labelWidth
      }

      if (!!this.designer) {
        return this.designer.formConfig.labelWidth
      } else {
        return this.formConfig.labelWidth
      }
    },

    labelAlign() {
      if (!!this.field.options.labelAlign) {
        return this.field.options.labelAlign
      }

      if (!!this.designer) {
        return this.designer.formConfig.labelAlign || 'label-left-align'
      } else {
        return this.formConfig.labelAlign || 'label-left-align'
      }
    },

    customClass() {
      return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
    },

    subFormName() {
      return !!this.getSubFormName ? this.getSubFormName() : ''
    },

    subFormItemFlag() {
      return !!this.getSubFormFieldFlag ? this.getSubFormFieldFlag() : false
    },

  },
  created() {
    //
  },
  methods: {
    selectField(field) {
      if (!!this.designer) {
        this.designer.setSelected(field)
        this.designer.emitEvent('field-selected', this.parentWidget)  //发送选中组件的父组件对象
      }
    },

    selectParentWidget() {
      if (this.parentWidget) {
        this.designer.setSelected(this.parentWidget)
      } else {
        this.designer.clearSelected()
      }
    },

    moveUpWidget() {
      this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
      this.designer.emitHistoryChange()
    },

    moveDownWidget() {
      this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
      this.designer.emitHistoryChange()
    },

    cloneField(field) {
      this.designer.cloneFieldWidget(field, this.parentList)
      this.designer.emitHistoryChange()
    },

    removeFieldWidget() {
      if (!!this.parentList) {
        const fieldRefName = this.designer.selectedWidgetName
        let nextSelected = null
        if (this.parentList.length === 1) {
          if (!!this.parentWidget) {
            nextSelected = this.parentWidget
          }
        } else if (this.parentList.length === (1 + this.indexOfParentList)) {
          nextSelected = this.parentList[this.indexOfParentList - 1]
        } else {
          nextSelected = this.parentList[this.indexOfParentList + 1]
        }

        this.$nextTick(() => {
          this.parentList.splice(this.indexOfParentList, 1)
          this.designer.setSelected(nextSelected)
          this.designer.formWidget.deleteWidgetRef(fieldRefName)  //删除组件ref！！！
          this.designer.emitHistoryChange()
          this.designer.emitEvent('canvas-remove-field', fieldRefName)
          //组件删除的同时清除inputModelTree中的绑定的组件
          eventBus.$emit(EVENT_BUS_KEY.CLEAR_ALL_COMPONENT_FROM_TREE, [])
        })
      }
    },

    getPropName() {
      let fieldKeyName = this.field.options.name
      fieldKeyName = this.field.options.keyNameEnabled ? (this.field.options.keyName || fieldKeyName) : fieldKeyName
      /*if (this.inTableFlag) {
        fieldKeyName = this.columnProp
      } else*/
      if (this.subFormItemFlag && !this.designState) {
        fieldKeyName = this.subFormName + '.' + this.subFormRowIndex + '.' + fieldKeyName
      } else if (this.getObjectFieldFlag() && !this.designState) {
        fieldKeyName = this.getObjectName() + '.' + fieldKeyName
      }

      // console.log('getPropName', fieldKeyName);
      return fieldKeyName
    },


  },
}
</script>

<style lang="scss" scoped>
//

/*.disabled {
  pointer-events: none;
}*/

.design-time-bottom-margin {
  margin-bottom: 5px;
}

.render-time-bottom-margin {
  :deep(.ep-form-item--default) {
    margin-bottom: 0 !important;
  }

  :deep(.ep-form-item) {
    margin-bottom: 0 !important;
  }
}

.field-wrapper {
  position: relative;
  display: flex;
  align-items: center;

  .field-action {
    position: absolute;
    //bottom: -24px;
    bottom: 0;
    right: -2px;
    height: 22px;
    line-height: 22px;
    background: var(--ep-color-primary);
    z-index: 9;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 3px;
      cursor: pointer;
    }
  }

  .drag-handler {
    position: absolute;
    top: 0;
    //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
    left: -1px;
    height: 20px;
    line-height: 20px;
    //background: var(--ep-color-primary);
    z-index: 9;

    i {
      font-size: 12px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: move;
    }

    &:hover {
      //opacity: 1;
      background: var(--ep-color-primary);
    }
  }
}

.field-action,
.drag-handler {
  :deep(.svg-icon) {
    margin-left: 0;
    margin-right: 0;
  }
}

.ep-form-item {
  //margin-bottom: 0 !important;
  //margin-bottom: 6px;

  //margin-top: 2px;
  position: relative;

  :deep(.ep-form-item__label) {
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: v-bind('pointerEvent');
  }

  :deep(.ep-form-item__content) {
    pointer-events: v-bind('pointerEvent');
    //position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
  }

  span.custom-label i {
    margin: 0 3px;
  }

  /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
  :deep(.hide-spin-button) input::-webkit-outer-spin-button,
  :deep(.hide-spin-button) input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
  :deep(.hide-spin-button) input[type="number"] {
    -moz-appearance: textfield;
  }
}

.label-wrap {
  :deep(.ep-form-item__label) {
    word-break: break-all;
    white-space: pre-wrap !important;
    line-height: 16px;
  }
}

.required :deep(.ep-form-item__label)::before {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}

.static-content-item {
  min-height: 20px;
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 垂直居中 */

  :deep(.ep-divider--horizontal) {
    margin: 0;
  }
}

.ep-form-item.selected,
.static-content-item.selected {
  outline: 2px solid var(--ep-color-primary);
}

:deep(.label-left-align) .ep-form-item__label {
  text-align: left;
  justify-content: flex-start !important;
}

:deep(.label-center-align) .ep-form-item__label {
  text-align: center;
  justify-content: center !important;
}

:deep(.label-right-align) .ep-form-item__label {
  text-align: right;
  justify-content: flex-end !important;
}
</style>
